<template>
  <div id="tab-row">
    <ul class="tab-wrap clearfix">
      <li :class="['tab-item', 'fl', {'tab-active': idx==currentTab}]"
      v-for="(item, idx) in tabs" :key="idx" v-if="perm && perm[map[idx]] == '1'"
      @click="handleTab(item,idx)">{{item.label}}</li>
      <!-- <li :class="['tab-item', 'fl', {'tab-active': idx==currentTab}]"
      v-for="(item, idx) in tabs" :key="idx" v-if="perm==false"
      @click="handleTab(item,idx)">{{item.label}}</li> -->
    </ul>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        currentTab: 0,
      }
    },
    computed: {
      // filter_tabs(){
      //   let origin = this.deepClone(this.tabs)
      //   if(perm) {
      //     origin.filter((item, idx) => {
      //       return perm[map[idx]] == '1'
      //     })
      //   }
      //   return origin
      // }
    },
    props: {
      tabs: {
        type: Array,
        required: true,
      },
      perm: { default: false, },
      map: { default: false,},
      type: {
        required: false,
        default: 'router',
      }
    },
    methods: {
      handleTab(item, idx){
        this.currentTab = idx
        if(this.type == 'tabs'){
          this.$emit('changePage', idx)
        }else {
          // console.log(item.path)
          this.$router.push(item.path)
        }
      }
    },
    created(){
      // console.log(this.perm, this.map)
      // 发布 publish
      // 订阅 subscribe
      this.$bus.on('changeTab', payload => {
        // console.log(payload)
        this.currentTab = payload
        // console.log(this.currentTab)
      })
    },
    beforeDestroy() {
      this.$bus.off('changeTab', payload => {
        this.currentTab = payload
      })
    }
  }
</script>

<style lang="scss" scoped>
  #tab-row{
    .tab-wrap{
      height: 60px;
      display: flex;
      background-color: $f;
    }
    .tab-item{
      flex: 1;
      cursor: pointer;
      font-size: 16px;
      text-align: center;
      line-height: 60px;
      color: $text-black;
      border: 1px solid transparent;
      margin-bottom: -1px;
      &:hover{
        background-color: $bg-gray;
      }
    }
    .tab-active{
      color: $primary;
      background-color: $bg-gray;
    }
  }
  @media screen and (max-width: 800px) {
    #tab-row{
      overflow-x: scroll;
      max-width: 100%;
      .tab-wrap{
        width: 1000px;
      }
    }
  }
</style>
